<template>
  <span @click="playOrPause">{{ pause ? '播放':'暂停' }}</span>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Howl, Howler } from 'howler'

@Component({
  name: 'AudioPlayer'
})
export default class extends Vue {
  @Prop(String) readonly src!: string

  private player: Howl = new Howl({
    src: [this.src],
    html5: true,
    onend: this.handleEnded
  })

  private readonly sliderGranularity = 0.5 // second
  private pause = true;

  private playOrPause () {
    this.pause
      ? this.player.play()
      : this.player.pause()
    this.pause = !this.pause
  }

  private handleEnded () {
    this.pause = true
  }
}
</script>
